<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .flex {
        display: flex;
        height: 100px;
      }

      .flex-item {
        width: 100px;
        height: 100px;
        background-color: aliceblue;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <!-- 
    条件渲染：根据不同的条件来控制元素的渲染与否
      主要提供有如下的指令：
          v-if
          v-else-if
          v-else

    控制元素显示隐藏的指令：
          v-show


    面试题：v-if 与 v-show 的区别
      1. 两者都能够控制元素的显示隐藏
      2. v-if 是真正的 条件渲染，条件为真元素会创建，条件为假元素会销毁。
      3. v-show 只是简单的控制元素的 css 样式 display: none
      4. v-if 有更高的 切换开销
      5. v-show 有更高的 初始渲染开销
      6. 如果元素需要频繁的切换显示，使用 v-show. 其余一般都使用 v-if
      7. v-if 可以配置 template 使用，但是 v-show 不能。
          因为 template 不会生成 html 标签在页面，v-show 不能去修改他的 css

    template 元素
      > 作为一个包裹元素，不会渲染到真是的页面上。

   -->
    <div id="app">
      <div class="box" v-if="userInfo">
        <p>欢迎你，xxx</p>
      </div>

      <div class="box" v-else>
        <button v-on:click="handleLogin">登录</button>
      </div>

      <div v-if="fenshu >= 90">优秀</div>
      <div v-else-if="fenshu >= 80">良好</div>
      <div v-else-if="fenshu >= 60">及格</div>
      <div v-else>差</div>

      <hr />

      <!-- 
        需求：根据 userInfo 是否有值，来控制 Hello World 两个div的显影

          问题：
            1. 使用 v-if 在多个元素上来操控，当需要操控的元素变多时，我们 v-if 写得很啰嗦
                方案：外层包裹一个 div 
            2. 包裹的 div 会让页面的 结构出现变动，会带来样式的问题
          
          解决：
            使用 template 元素来作为包裹元素
       -->
      <div class="flex">
        <template v-if="userInfo">
          <div class="flex-item">Hello</div>
          <div class="flex-item">World</div>
        </template>

        <div class="flex-item">我的天</div>
        <div class="flex-item">我的地</div>
      </div>
    </div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const { createApp } = Vue;

      // 创建应用实例
      const app = createApp({
        data() {
          return {
            // 用来表示当前登录用户的信息
            //    { username: '张三', sex: '男' } 表示登录了
            //    null  表示未登录
            userInfo: null,

            fenshu: 60,
          };
        },

        methods: {
          handleLogin() {
            console.log(this);
            // 修改 this.userInfo
            this.userInfo = {
              username: "张三",
              sex: "男",
            };
          },
        },
      });

      // 挂载
      app.mount("#app");
    </script>
  </body>
</html>
